<template>
  <el-form :model="info" ref="slotForm" inline class="choose-info">
    <el-form-item
      class="item"
      label="时长"
      prop="length"
      :rules="[
      { required: true, message: '时长不能为空'},
      { type: 'number', message: '时长必须为数字'}
    ]"
    >
      <el-input
        type="age"
        style="width:140px;"
        v-model.number="info.length"
        :controls="false"
        :min="1"
      >
        <el-select style="width:70px" v-model="info.type" slot="append">
          <el-option label="月" :value="1" />
          <el-option label="年" :value="2" />
        </el-select>
      </el-input>
    </el-form-item>

    <el-form-item
      class="item"
      label="价格"
      prop="price"
      :rules="[
      { required: true, message: '价格不能为空'},
      { type: 'number', message: '价格必须为数字'}
    ]"
    >
      <el-input-number
        style="width:100px;"
        v-model.number="info.price"
        controls-position="right"
        :min="0"
      ></el-input-number>
    </el-form-item>
    <el-form-item class="item" label="名称" prop="desc">
      <el-input style="width:200px;" v-model="info.desc"></el-input>
    </el-form-item>

    <el-form-item class="item">
      <el-button v-if="index !== 0" type="success" @click="move(-1)">上移</el-button>
      <el-button v-if="index !== length-1" type="warning" @click="move(1)">下移</el-button>
      <el-button v-if="index !== 0" type="danger" @click="remove">删除</el-button>
      <el-button v-if="index === length-1" type="primary" @click="add">添加</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: {
    index: {
      type: Number,
      default: 0
    },
    length: {
      type: Number,
      default: 0
    },
    info: {
      type: Object,
      default: () => {
        return {
          length: "",
          type: 1,
          price: "",
          desc: ""
        };
      }
    }
  },
  mounted() {},
  methods: {
    add() {
      this.$refs["slotForm"].validate(valid => {
        if (valid) {
          this.$emit("add");
        }
      });
    },
    move(step) {
      this.$emit("move", this.index, this.index + step);
    },
    remove() {
      this.$emit("remove", this.index);
    }
  }
};
</script>
<style lang="scss" scoped>
.choose-info {
  display: flex;
  .item {
    margin-right: 20px;
    margin-bottom: 20px;
  }
}
</style>
